<template>
    <div class="app1">
        <card class="card">
            <ul>
              <li v-for="item in productList" :key="item">{{item}}</li>
            </ul>
        </card>

        <card>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z9291TIBZ6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663301948&t=62be2de20d2b04e1087257dd97e6db70" alt="">
        </card>
        <card>
            姓名:<input>
            年龄:<input>
            学历:<input>
            专业:<input>
        </card>
    </div>
</template>

<script>
import Card from './components/Card.vue'
export default {
  components: { Card },
  data(){
    return{
      productList:['苹果','橘子','草莓']
    }
  }

}
</script>

<style lang="scss">
  .app1{
      display:flex;
      margin:10px;
      .card{
        margin: 10px;
      }
  }
</style>